<template>
    <div>
        <div class="topline"></div>
        <div class="wrapper">
            <ul class="searchList" v-if="show">
                <li v-for="(item,index) of listChange" :key='index'>
                    <router-link :to="{path:'/details',query:{id:item.id}}">
                        <div class="imgBox">
                            <img :src="item.pic1">
                        </div>
                        <span class="title">{{item.name}}</span>
                        <span class="price">￥{{item.price}}</span>
                    </router-link>
                </li>
            </ul>
            <div class="noResult" v-else>
                <span class="topContent">
                    没有找到您要的宝贝，再去
                        <router-link to="/">
                           <b>看看其他的</b>
                        </router-link>
                    吧
                </span>
                <span class="midTitle">
                    <h5>精品推荐</h5>
                </span>
                <ul>
                    <li v-for="(item,index) of bottomList" :key="index">
                        <img :src="item.url">
                        <p class="bottomTitle">
                            <span class="partFont">
                                {{item.part1}}<span class="part2">{{item.part2}}</span>{{item.part3}}
                            </span>
                        </p>
                        <router-link :to="item.route">
                            <p class="cilckBtn">
                                <span>点击查看</span>
                            </p>
                        </router-link>
                        <div class="cover">
                           <span class="content">敬请期待</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>


<script>
import {mapMutations,mapGetters} from 'vuex'
export default {
  data () {
    return {
        currentPage: 1,
        total      : '',
        per        : 12,
        pages      : 10,
        show       : false,
        key        : '',
        bottomList:[
                {url:require('@/index/choiceness(1).png'),part1:'原',part2:'木',part3:'沙发',route:'/bed'},
                {url:require('@/index/choiceness(2).png'),part1:'原',part2:'木',part3:'茶几',route:'/endtable'},
                {url:require('@/index/choiceness(3).png'),part1:'原',part2:'木',part3:'橱柜',route:'/cabinet'},
                {url:require('@/index/choiceness(4).png'),part1:'原',part2:'木',part3:'座椅',route:'/'},
            ]
        }
    },
    beforeMount() {
        this.key=this.$route.query.key
        this.axios({
            url   : `${this.$config.dataUrl}/api/v1/categories/list`,
            method: 'get'
        }).then(res=>{
            var k=res.data.data.slice(2,3).concat(res.data.data.slice(3,4),res.data.data.slice(1,2))
            for(var j in k){
                this.bottomList[j]=Object.assign({},k[j],this.bottomList[j])
            }
        })
        this.axios({
            url   : `${this.$config.dataUrl}/api/v1/contents1/search`,
            method: 'get',
            params  : {
                val:this.key
            }
        }).then(res=>{
            this.$store.dispatch('changeSearch',res.data.data)
        })
    },
    computed: {
        ...mapGetters({
            listChange:'searchList'
        })
    },
    watch: {
        listChange :{
            handler(nv,ov){
                if(nv.length!=0){
                    this.show=true
                }else{
                    this.show=false
                }
            }
        },
        $route(){
            this.$router.go(0)
        },
    },
}
</script>


<style lang="scss" scoped>
    @mixin clearfix() {
        &::after {
            display: block;
            clear  : both;
            content: '';
        }
    }
    @mixin wrapperStyle{
        width    : 12rem;
        margin   : 0 auto;
        position : relative;
        font-size: 0.16rem;
        @include clearfix();
        a{
            color: #666
        }
        ul{
            margin-bottom       : 0.4rem;
            padding-inline-start: 0;
        }
        li{
            list-style: none
        }
    }
    .wrapper{
        @include wrapperStyle();
        .searchList{
            display  : flex;
            flex-wrap: wrap;
            li{
                margin-bottom: 0.18rem;
                &:not(:nth-of-type(4n+0)){
                    margin-right: 0.2rem
                }
                a{
                    display       : flex;
                    flex-direction: column;
                }
            }
            .imgBox{
                width   : 2.85rem;
                height  : 2.85rem;
                overflow: hidden;
                img{
                    width     : 100%;
                    height    : 100%;
                    transition: all 0.5s;
                    &:hover{
                        transform: scale(1.1,1.1);
                    }
                }
            }
            span{
                width     : 100%;
                text-align: center
            }
            .title{
                margin-top: 0.25rem
            }
        }
        .noResult{
            width: 100%;
            padding-top: 0.5rem;
            .topContent{
                display: block;
                margin-bottom: 3rem;
                font-size: 0.18rem
            }
            b{
                color: #b49d7e
            }
            ul{
                padding-inline-start: 0;
                display             : flex;
                li{
                    list-style : none;
                    width      : 2.8rem;
                    height     : 4.38rem;
                    margin-left: 0.27rem;
                    position   : relative;
                    transition : all 0.4s;
                    overflow: hidden;
                    &:first-child{
                        margin-left: 0;
                    }
                    &:last-child:hover .cover:last-child{
                        top: 0
                    }
                    &:hover{
                        box-shadow: 0px 12px 25px 3px rgba(95,92,92,0.34);
                    }
                    img{
                        width : 100%;
                        height: 100%;
                    }
                    .bottomTitle{
                        font-size      : 0.24rem;
                        position       : absolute;
                        display        : flex;
                        justify-content: center;
                        width          : 100%;
                        margin-bottom  : 0;
                        bottom         : 1.14rem;
                        .partFont{
                            margin: 0 auto;
                        }
                        .part2{
                            color: #b49d7e;
                        }
                    }
                    .cilckBtn{
                        font-size      : 0.16rem;
                        position       : absolute;
                        display        : flex;
                        justify-content: center;
                        width          : 100%;
                        margin-bottom  : 0;
                        bottom         : 0.63rem;
                        cursor         : pointer;
                        color          : #ffffff;
                        span{
                            background-color: #B49D7E;
                            width           : 1rem;
                            height          : 0.4rem;
                            line-height     : 0.4rem;
                            text-align      : center;
                        }
                    }
                    .cover{
                        position: absolute;
                        background: rgba(0, 0, 0, 0.36);
                        width: 100%;
                        height: 100%;
                        top: 100%;
                        color: #ffffff;
                        display: flex;
                        font-size: 0.42rem;
                        transition : all 0.5s;
                        .content{
                            display: inline-block;
                            margin: auto;
                        }
                    }
                }
            }
        }
        .midTitle{
            h5{
                font-size: 0.32rem;
                color: #b49d7e;
                font-weight: 500
            }

        }
    }
    .topline{
        width        : 100%;
        height       : 1.27rem;
        border-bottom: 0.01rem rgba(235,235,235,1) solid;
        margin-bottom: 0.2rem;
    }

</style>
